<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>-->
    <link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<div class="container_ float">
    <div class="left material_box">
        <div class="float video_box">
            <div class="left board">
                <span class="codePage">2/7</span>
            </div>
            <div class="left video">
                <div class="v_box student">
                    <div class="status">
                        <div class="role_img"><img src="http://img.taopic.com/uploads/allimg/121017/234940-12101FR22825.jpg"/></div>
                        <span>student &nbsp; c0001</span>
                        <span>offine</span>
                    </div>
                </div>
                <div class="v_box teacher">
                    <div class="status">
                        <div class="role_img"><img src="http://img.taopic.com/uploads/allimg/121017/234940-12101FR22825.jpg"/></div>
                        <span>teacher &nbsp; c0001</span>
                        <span class="online">online</span>
                    </div>
                </div>
            </div>
        </div>
        <!--操作按钮-->
        <div class="float setting">
            <div class="ppt_set left">
                <ul class="list_group tool border-left">
                    <li>
                        <span class="my_icon pen"></span>
                        <span>Pen</span>
                    </li>
                    <li>
                        <span class="my_icon square"></span>
                        <span>Square</span>
                    </li>
                    <li>
                        <span class="my_icon line"></span>
                        <span>Line</span>
                    </li>
                    <li>
                        <span class="my_icon eraser"></span>
                        <span>Eraser</span>
                        <div class="more_handle">
                            <div class="handle">
                                <h6>title</h6>

                                <div class="handleCont">
                                    <p>Content</p>
                                    <p>Content</p>
                                    <p>Content</p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <span class="my_icon material"></span>
                        <span>Material</span>
                    </li>
                    <li>
                        <span class="my_icon help"></span>
                        <span>Help</span>
                    </li>
                    <li>
                        <span class="my_icon report"></span>
                        <span>Report</span>
                    </li>
                    <li>
                        <span class="my_icon dismiss"></span>
                        <span>Dismiss</span>
                    </li>
                    <li>
                        <span class="my_icon time"></span>
                        <span>19:09:30</span>
                    </li>
                </ul>
            </div>
            <div class="video_set left">
                <ul class="list_group tool">
                    <li>
                        <span class="my_icon setting"></span>
                        <span>Setting</span>
                    </li>
                    <li>
                        <span class="my_icon camera"></span>
                        <span>Close</span>
                    </li>
                    <li>
                        <span class="my_icon mute"></span>
                        <span>Mute</span>
                    </li>
                </ul>
            </div>
        </div>
        <!--PPT展示-->
        <div class="bottom-panel">
            <div class="material-list">
                <div class="pre"><i class="direction iconLeft"></i></div>
                <ul class="wraper" id="materialPage">
                    <li class="box" id="hidden-box">
                        <div class="pdfBox"><img src="http://img.taopic.com/uploads/allimg/121017/234940-12101FR22825.jpg"></div>
                        <p class="pdfPage">1</p>
                    </li>
                    <li class="box" id="hidden-box">
                        <div class="pdfBox"><img src="http://img.taopic.com/uploads/allimg/121017/234940-12101FR22825.jpg"></div>
                        <p class="pdfPage">2</p>
                    </li>
                    <li class="box" id="hidden-box">
                        <div class="pdfBox"><img src="http://img.taopic.com/uploads/allimg/121017/234940-12101FR22825.jpg"></div>
                        <p class="pdfPage">3</p>
                    </li>
                    <li class="box" id="hidden-box">
                        <div class="pdfBox"><img src="http://img.taopic.com/uploads/allimg/121017/234940-12101FR22825.jpg"></div>
                        <p class="pdfPage">4</p>
                    </li>
                </ul>
                <div class="next"><i class="direction iconRight"></i></div>
            </div>
        </div>
    </div>
    <!--聊天窗口-->
    <div class="left chat">
        <div class="chat-box">
            <div class="chat-content box-sizing" id="chatContent">
                <div data-time="1479696140222" data-id="5fbc9e39-d5d8-4c74-bfb9-340e86bf5aa3"
                     id="5fbc9e39-d5d8-4c74-bfb9-340e86bf5aa3" data-idserver="1268536081" class="item item-you">
                    <img class="img j-img" src="images/default-icon.png" data-account="p_29976036628581026">

                    <div class="msg msg-text j-msg">
                        <div class="box">
                            <div class="cnt">
                                <div class="f-maxWid">Hello&nbsp;world！Hello&nbsp;云信开发者。我是你在云信Demo上的第一个好友。如果还没添加其他好友进行消息收发测试，那就发给我试试吧！</div>
                            </div>
                        </div>
                    </div>
                </div>
                <p class="u-msgTime">- - - - -&nbsp;11:00&nbsp;- -- - -</p>
                <div data-time="1479697251387" data-id="1d19468d40cd096298bed21acd544f48"
                     id="1d19468d40cd096298bed21acd544f48" data-idserver="1268672005" class="item item-me">
                    <img class="img j-img" src="images/default-icon.png" data-account="zhouxr">

                    <div class="msg msg-text j-msg">
                        <div class="box">
                            <div class="cnt">
                                <div class="f-maxWid"><img class="emoji" src="images/emoji/emoji_28.png"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div data-time="1479696140222" data-id="5fbc9e39-d5d8-4c74-bfb9-340e86bf5aa3"
                     id="5fbc9e39-d5d8-4c74-bfb9-340e86bf5aa3" data-idserver="1268536081" class="item item-you">
                    <img class="img j-img" src="images/default-icon.png" data-account="p_29976036628581026">

                    <div class="msg msg-text j-msg">
                        <div class="box">
                            <div class="cnt">
                                <div class="f-maxWid">Hello&nbsp;world！Hello&nbsp;云信开发者。我是你在云信Demo上的第一个好友。如果还没添加其他好友进行消息收发测试，那就发给我试试吧！</div>
                            </div>
                        </div>
                    </div>
                </div>
                <p class="u-msgTime">- - - - -&nbsp;11:00&nbsp;- -- - -</p>
                <div data-time="1479697251387" data-id="1d19468d40cd096298bed21acd544f48"
                     id="1d19468d40cd096298bed21acd544f48" data-idserver="1268672005" class="item item-me">
                    <img class="img j-img" src="images/default-icon.png" data-account="zhouxr">

                    <div class="msg msg-text j-msg">
                        <div class="box">
                            <div class="cnt">
                                <div class="f-maxWid"><img class="emoji" src="images/emoji/emoji_28.png"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div data-time="1479696140222" data-id="5fbc9e39-d5d8-4c74-bfb9-340e86bf5aa3"
                     id="5fbc9e39-d5d8-4c74-bfb9-340e86bf5aa3" data-idserver="1268536081" class="item item-you">
                    <img class="img j-img" src="images/default-icon.png" data-account="p_29976036628581026">

                    <div class="msg msg-text j-msg">
                        <div class="box">
                            <div class="cnt">
                                <div class="f-maxWid">Hello&nbsp;world！Hello&nbsp;云信开发者。我是你在云信Demo上的第一个好友。如果还没添加其他好友进行消息收发测试，那就发给我试试吧！</div>
                            </div>
                        </div>
                    </div>
                </div>
                <p class="u-msgTime">- - - - -&nbsp;11:00&nbsp;- -- - -</p>
                <div data-time="1479697251387" data-id="1d19468d40cd096298bed21acd544f48"
                     id="1d19468d40cd096298bed21acd544f48" data-idserver="1268672005" class="item item-me">
                    <img class="img j-img" src="images/default-icon.png" data-account="zhouxr">

                    <div class="msg msg-text j-msg">
                        <div class="box">
                            <div class="cnt">
                                <div class="f-maxWid"><img class="emoji" src="images/emoji/emoji_28.png"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div data-time="1479696140222" data-id="5fbc9e39-d5d8-4c74-bfb9-340e86bf5aa3"
                     id="5fbc9e39-d5d8-4c74-bfb9-340e86bf5aa3" data-idserver="1268536081" class="item item-you">
                    <img class="img j-img" src="images/default-icon.png" data-account="p_29976036628581026">

                    <div class="msg msg-text j-msg">
                        <div class="box">
                            <div class="cnt">
                                <div class="f-maxWid">Hello&nbsp;world！Hello&nbsp;云信开发者。我是你在云信Demo上的第一个好友。如果还没添加其他好友进行消息收发测试，那就发给我试试吧！</div>
                            </div>
                        </div>
                    </div>
                </div>
                <p class="u-msgTime">- - - - -&nbsp;11:00&nbsp;- -- - -</p>
                <div data-time="1479697251387" data-id="1d19468d40cd096298bed21acd544f48"
                     id="1d19468d40cd096298bed21acd544f48" data-idserver="1268672005" class="item item-me">
                    <img class="img j-img" src="images/default-icon.png" data-account="zhouxr">

                    <div class="msg msg-text j-msg">
                        <div class="box">
                            <div class="cnt">
                                <div class="f-maxWid"><img class="emoji" src="images/emoji/emoji_28.png"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div data-time="1479696140222" data-id="5fbc9e39-d5d8-4c74-bfb9-340e86bf5aa3"
                     id="5fbc9e39-d5d8-4c74-bfb9-340e86bf5aa3" data-idserver="1268536081" class="item item-you">
                    <img class="img j-img" src="images/default-icon.png" data-account="p_29976036628581026">

                    <div class="msg msg-text j-msg">
                        <div class="box">
                            <div class="cnt">
                                <div class="f-maxWid">Hello&nbsp;world！Hello&nbsp;云信开发者。我是你在云信Demo上的第一个好友。如果还没添加其他好友进行消息收发测试，那就发给我试试吧！</div>
                            </div>
                        </div>
                    </div>
                </div>
                <p class="u-msgTime">- - - - -&nbsp;11:00&nbsp;- -- - -</p>
                <div data-time="1479697251387" data-id="1d19468d40cd096298bed21acd544f48"
                     id="1d19468d40cd096298bed21acd544f48" data-idserver="1268672005" class="item item-me">
                    <img class="img j-img" src="images/default-icon.png" data-account="zhouxr">

                    <div class="msg msg-text j-msg">
                        <div class="box">
                            <div class="cnt">
                                <div class="f-maxWid"><img class="emoji" src="images/emoji/emoji_28.png"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="sendMsg">
            <textarea class="enterMsg" placeholder=" Tpye message here"></textarea>
            <button class="sendBtn">Send</button>
        </div>
    </div>
</div>
</div>

</body>
</html>